﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			
			canvas {
				background-image: url(../img/1_1366x768.jpg);
				background-size: cover;
			}
		</style>
		<script src="js/numArray.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<canvas id="can"></canvas>
		<script type="text/javascript">
			var can = document.getElementById("can");
			var bi = can.getContext("2d");
			var qr;
			window.onresize = function() {
				can.width = document.documentElement.clientWidth;
				can.height = document.documentElement.clientHeight;
				qr = can.width / 1400 * 10;
			}
			window.onload = function() {
				can.width = document.documentElement.clientWidth;
				can.height = document.documentElement.clientHeight;
				qr = can.width / 1400 * 10;
			}

			//小球数组
			var arr = [];
			//小球模型
			function moxing(x, y) {
				this.x = x;
				this.y = y;
				this.r = can.width / 1400 * 10;
				this.colo = "rgb(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ")";
				var fx = Math.random() > 0.5 ? 1 : -1;
				this.vx = fx * (Math.random() * 5 + 5);
				fx = Math.random() > 0.5 ? 1 : -1;
				this.vy = fx * Math.random() * 10;
			}
			var time //当前时间
			gettime();
			setInterval(function() {
				bi.clearRect(0, 0, can.width, can.height);
				ntime();
				gettime();
			}, 50);

			//获取当前时间
			function ntime() {
				var time2 = new Date;
				var hh = time2.getHours();
				var ff = time2.getMinutes();
				var mm = time2.getSeconds();
				if(mm % 10 != time.getSeconds() % 10) {
					addqiu(can.width / 1400 * 10 * 92, time.getSeconds() % 10)
				}
				if(parseInt(mm / 10) != parseInt(time.getSeconds() / 10)) {
					addqiu(can.width / 1400 * 10 * 76, parseInt(time.getSeconds() / 10))
				}
				dayin2();
			}
			//添加小球
			function addqiu(x, num) {
				for(var i = 0; i < numbers[num].length; i++) {
					for(var k = 0; k < numbers[num][i].length; k++) {
						if(numbers[num][i][k]) {
							//							console.log(k)
							var mx = new moxing((k + 1) * (can.width / 1400 * 10 * 2) + x, (i + 1) * (2 * can.width / 1400 * 10) + 50);
							//							console.log((k+1) * (can.width/1400*10) + x+"---"+(i+1) * (can.width/1400*10)+50)
							arr.push(mx);
						}
					}
				}
			}

			//时间数组
			var arrtime = [];
			//获取时间
			function gettime() {
				arrtime = [];
				time = new Date;
				var hh = time.getHours();
				var ff = time.getMinutes();
				var mm = time.getSeconds();
				arrtime.push(parseInt(hh / 10));
				arrtime.push(parseInt(hh % 10));
				arrtime.push(10);
				arrtime.push(parseInt(ff / 10));
				arrtime.push(parseInt(ff % 10));
				arrtime.push(10);
				arrtime.push(parseInt(mm / 10));
				arrtime.push(parseInt(mm % 10));
				dayinqiu(arrtime);
			}
			//打印小球
			function dayinqiu(arrtime) {
				var weiyi = 0;
				for(var i = 0; i < arrtime.length; i++) {
					if(i == 0) {
						bi.fillStyle = "#A52A2A"
					} else
					if(i == 1) {
						weiyi = qr * 15;
					} else if(i == 2) {
						weiyi = qr * 30;
					} else if(i == 3) {
						weiyi = qr * 38;
					} else if(i == 4) {
						weiyi = qr * 54;
					} else if(i == 5) {
						weiyi = qr * 68;
					} else if(i == 6) {
						weiyi = qr * 76;
					} else if(i == 7) {
						weiyi = qr * 92;
					}
					for(var k = 0; k < numbers[arrtime[i]].length; k++) {
						for(var h = 0; h < numbers[arrtime[i]][k].length; h++) {
							if(numbers[arrtime[i]][k][h]) {
								bi.beginPath();
								bi.arc(h * 2 * qr + weiyi + 10, k * 2 * qr + 60, qr, 0, 2 * Math.PI)
								bi.fill();
							}
						}
					}
				}
			}
			//打印下落小球
			function dayin2() {
				var cumt = 0;
				for(var i = 0; i < arr.length; i++) {
					bi.beginPath();
					bi.arc(arr[i].x, arr[i].y, arr[i].r, 0, 2 * Math.PI)
					bi.fillStyle = arr[i].colo;
					bi.fill();
					arr[i].x += arr[i].vx;
					arr[i].y += arr[i].vy;
					arr[i].vy += 9.8;
					if(arr[i].y >= can.height - arr[i].r) {
						arr[i].y = can.height;
						arr[i].vy = -0.6 * arr[i].vy;
					}
					if(arr[i].x > -arr[i].r && arr[i].x < can.width + arr[i].r) {
						arr[cumt++] = arr[i];
					}
				}
				while(cumt < arr.length) {
					arr.pop();
				}
			}
		</script>
	</body>

</html>